import React, {useState} from "react";
import TheButton from "@/components/TheButton";
import TheTable from "@/components/TheTable";
import {SearchOutlined, StarOutlined, UploadOutlined} from '@ant-design/icons';
import {
    Button,
    Table,
    Modal,
    InputNumber,
    Popconfirm,
    Input,
    Pagination,
    Radio,
    Form,
    Switch,
    Tooltip,
    Upload,
    message
} from 'antd';
import {apiGetGoodsInfoPage, apiPlatformActivitySheetExcelImport} from '@/request/activityManager'
import './style.less'
import PropTypes from 'prop-types'
import {DragDropContext, Droppable, Draggable} from "react-beautiful-dnd"

class Goods extends React.Component {
    formRef = React.createRef()

    constructor(props) {
        super(props)
        this.state = {
            capture: false,//拖动元素是否被捕获
            checkStart: false,
            eidtKey: '',
            isDragDisabled: false,
            columns: [{
                title: "商品名称",
                dataIndex: "name",
                key: "name",
            },
                {
                    title: "商品Id",
                    dataIndex: "goodsId",
                    key: "goodsId",
                },
                {
                    title: "规格",
                    dataIndex: "attr",
                    key: "attr",

                },
                {
                    title: "门店",
                    dataIndex: "home",
                    key: "home",
                },
                {
                    title: "原价",
                    dataIndex: "skuOriginalPrice",
                    key: "skuOriginalPrice",

                }, {
                    title: "现价",
                    dataIndex: "skuCurrentPrice",
                    key: "skuCurrentPrice",

                }, {
                    title: "活动价格",
                    dataIndex: "activityPrice",
                    key: "activityPrice",
                },
                //   {
                //   title: "是否参加活动",
                //   dataIndex: "isJoinActive",
                //   key: "isJoinActive",
                // },
                {
                    title: "操作",
                }],
            num: null,
            modalTitle: '添加活动专区',
            isModalVisible: false,
            goodsSku: []
            , checkGoods: [],
            nowStep: -1,
            nowPromotions: null,
            goodsList: [],
            pageNo: 1,
            pageSize: 10,
            totalCount: 0,
            goodsName: '',
            activityType: '',
            clock: false,
            clockTime: null
        }
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.activityType !== this.state.activityType) {
            if (nextProps.activityType === 'FULL_GIFT') {
                this.state.columns.splice(3, 0, {
                    title: "别名",
                    dataIndex: "aliasName",
                    key: "aliasName",
                })
            } else {
                if (this.state.columns[3].title === '别名') {

                    this.state.columns.splice(3, 1)
                }
            }
        }
        this.setState({
            goodsSku: nextProps.goodsSku,
            activityType: nextProps.activityType,
            columns: this.state.columns
        });
    }

    componentDidUpdate(nextProps) {
        // return this.props.activityType !== nextProps.activityType
    }

    componentDidMount() {
        this.setState({
            goodsSku: []
        })

        this.getData()
    }

    async getData() {
        let res = await apiGetGoodsInfoPage({
            pageNo: this.state.pageNo,
            pageSize: this.state.pageSize,
            goodsName: this.state.goodsName,
            storeStatus: 'Y',
            goodsStatus: 'Y',
            reviewStatus: 'T'
        })
        if (res.code === 0) {
            this.setState({
                goodsList: res.data,
                totalCount: res.totalCount
            }, () => {
                let dom = document.getElementById('goodsList')
                dom && (dom.scrollTop = 0)
            })
        } else {
            React.$message({
                type: 'error',
                content: res.message
            })
        }
    }

    reset(fn) {
        this.setState({
            num: null,
            modalTitle: '添加活动专区',
            isModalVisible: false,
            goodsSku: [],
            checkGoods: [],
            nowStep: -1,
            nowPromotions: null,
            pageNo: 1,
            goodsName: '',
            activityType: ''
        }, () => fn && fn())
    }

    onSearch(e) {
        e.preventDefault();
        this.setState({
            goodsName: e.target.value,
            pageNo: 1
        }, () => {

            this.getData()
        })
    }

    // 删除专区内活动选择的活动商品
    delGoods = (row, index) => {
        let self = this;
        let newData = [...this.state.goodsSku]
        let key = row.Promotions
        let PromotionsIndex = newData.findIndex(item => item[0] === key)
        newData[PromotionsIndex][1].splice(index, 1)
        this.setState({goodsSku: []}, () => {
            self.setState({goodsSku: newData})
        })
        this.props.addGoods({goodsSku: newData})
    }

    // 商品登录
    stick(row, index) {
        let self = this;
        let newData = [...this.state.goodsSku]
        let key = row.Promotions
        let PromotionsIndex = newData.findIndex(item => item[0] === key)
        newData[PromotionsIndex][1].splice(index, 1)
        newData[PromotionsIndex][1].unshift({...row})
        this.setState({goodsSku: []}, () => {
            self.setState({goodsSku: newData})
        })
        this.props.addGoods({goodsSku: newData})
    }

    // 修改商品活动价格
    acPriceChange = (val, sku, index, data, data_index, tr_index) => {
        sku.activityPrice = val
        sku.flag = true
    }
    // 满赠活动设置别名
    aliasChange = (val, sku, index, data, data_index, tr_index) => {
        sku.aliasName = val.target.value
        sku.aliasFlag = true
    }
    // 活动sku是否参加活动
    isJoinChange = (val, sku) => {

        sku.isJoinFlag = val
        if (!val) {
            sku.activityPrice = Number((Number(sku.skuCurrentPrice) / 100))
        }
        let {goodsSku} = this.state
        if (this.state.clock) {
            clearTimeout(this.state.clockTime)
        } else {
            this.state.clock = true
        }
        let clockTime = setTimeout(() => {
            this.props.addGoods({goodsSku: goodsSku})
            clearTimeout(this.state.clock)
            this.setState({
                clock: false
            })
        }, 500)
        this.setState({
            clockTime
        })
    }
    // 设置满赠门槛
    thresholdPriceChange = (val, index) => {
        const {goodsSku} = this.state
        goodsSku[index][2] = val
        goodsSku[index][3] = val + '' ? true : false
        this.setState({
            goodsSku: goodsSku
        })
    }
    handleOk = () => {
        this.formRef.current.validateFields().then(values => {
            this.setState({num: values.num})
            // 添加活动商品专区
            let {goodsSku, num, nowPromotions, modalTitle} = this.state
            let flag = goodsSku.filter(item => item[0] === num)
            if (num === '') return
            if (modalTitle === '添加活动专区') {
                if (flag.length > 0) {
                    React.$message({
                        type: 'warning',
                        content: '已存在相同数据！'
                    })
                    return
                }
                goodsSku.push([num, [], null, true])
            } else {
                if (flag.length > 0 && num !== nowPromotions) {
                    React.$message({
                        type: 'warning',
                        content: '已存在相同数据！'
                    })
                    return
                }
                let index = goodsSku.findIndex(item => item[0] === nowPromotions)
                goodsSku[index] = [num, goodsSku[index][1], goodsSku[index][2], goodsSku[index][3], goodsSku[index][4]]
            }
            this.formRef.current.setFieldsValue({num: null})
            this.setState({
                isModalVisible: false,
                goodsSku
            })
            this.props.addGoods({goodsSku: goodsSku})
        })
    };
    // 编辑活动专区
    editPromotions = (key, val) => {
        this.setState({
            isModalVisible: true,
            modalTitle: '编辑活动专区',
            num: key,
            nowPromotions: key
        }, () => {
            this.formRef.current.setFieldsValue({num: key})
        })
    }
    handleCancel = () => {
        this.setState({
            isModalVisible: false
        })
    };

    // 商品批量导入
    async importGoods(e, index) {
        console.log('importGoods');
        const importBtnDom = document.getElementsByClassName('importBtn')
        let formData = new FormData()
        formData.append('file', e.target.files[0])
        e.target.value = ""
        const activityVo = this.state.goodsSku.map((item, activeIndex) => {
            return {
                activityGoodsVos: item[1].map(goods => {
                    return {
                        activityGoodsSkuVos: goods.skuInfoVos.map(sku => {
                            sku.isJoinFlag = true
                            return {
                                "goodsId": goods.goodsId,
                                "goodsSkuId": sku.goodsSkuId,
                                "activityGoodsSkuPrice": !sku.isJoinFlag ? sku.skuCurrentPrice : sku.activityPrice === null ? sku.skuCurrentPrice : Number((Number(sku.activityPrice) * 100).toFixed(0)),
                                currentPrice: sku.currentPrice,
                                activityGoodsSkuId: sku.activityGoodsSkuId,
                                activityGoodsId: sku.activityGoodsId,
                                skuAttributes: JSON.stringify(sku.skuAttributes),
                                aliasName: sku.aliasName,
                                skuEnabled: sku.isJoinFlag ? 1 : 0
                            }
                        }),
                        "goodsId": goods.goodsId,
                        storeId: goods.storeId
                    }
                }),
                "activityDetailName": item[0],
                "prizeType": "goods",

            }
        })
        formData.append('activityVo', JSON.stringify({
            activityDetailVos: activityVo
        }))
        fetch(React.$BaseUrl + '/admin/platformActivitySheet/excelImport', {
            method: "post",
            headers: {
                RSnetToken: sessionStorage.getItem('RSnetToken')
            },
            body: formData,
        })
            .then((res) => {

                res.json().then(result => {
                    if (result.code === 0) {
                        const {code, data, codeMessage} = result.data
                        if (code === 0) {
                            this.setState({
                                // goodsSku: this.state.goodsSku,
                            }, () => {
                                this.props.addGoods({goodsSku: []})
                                let {goodsSku, activityType} = this.state
                                let checkGoods = []

                                data.forEach(good => {
                                    console.log(good, 'sssdddd');
                                    good.hasJoinSku = true
                                    good.skuInfoVos.forEach(item => {
                                        item.flag = true
                                        item.aliasFlag = true
                                        item.isJoinFlag = true
                                        activityType === 'FULL_GIFT' && (item.activityPrice = 0)
                                        item.activityPrice = (Number(item.activityGoodsSkuPrice) / 100).toFixed(2)
                                    })
                                    goodsSku[index][1].push({
                                        ...good,
                                        activityPrice: null,
                                        Promotions: goodsSku[index][0]
                                    })
                                    checkGoods.push(goodsSku[index][0] + '-' + good.goodsId)
                                    // this.chooseGoods(item)
                                })
                                this.setState({
                                    goodsSku,
                                    checkGoods: checkGoods
                                })
                                this.props.addGoods({goodsSku: goodsSku})
                            })
                        } else if (code == 5000) {
                            Modal.error({
                                title: codeMessage,
                                width: 500,
                                content: (
                                    <div style={{maxHeight: 500, overflowY: 'auto'}}>
                                        {
                                            data.map((item, index) => {
                                                return <p key={index}>{item}</p>
                                            })
                                        }
                                    </div>
                                ),
                            });

                        } else {
                            message.error(codeMessage)
                        }


                    } else {
                        message.error(result.codeMessage)
                    }
                })


            })
            .catch((res) => {

            })
            .finally(() => {
                // // setUploading(false);
                // importBtnDom.setAttribute('type', 'text')
                // setTimeout(() => {
                //   importBtnDom.setAttribute('type', 'file')

                // }, 300);
            });

    }

    addPromotions = () => {
        this.setState({
            num: null
            ,
            isModalVisible: true,
            modalTitle: '添加活动专区',
        }, () => {
            this.formRef.current.setFieldsValue({num: null})
        })

    }

    // 活动专区移除
    delPromotions = (key, index) => {
        let {goodsSku} = this.state
        goodsSku.splice(index, 1)
        this.setState({
            goodsSku
        })
        this.props.addGoods({goodsSku: goodsSku})
    }
    // 活动专区添加商品
    addGoods = (key, val, index) => {
        let {goodsSku, nowStep} = this.state
        let checkGoods = []
        goodsSku.forEach(item => {
            let arr = item[1].map(item2 => item[0] + '-' + item2.goodsId)
            if (arr.length > 0) checkGoods = checkGoods.concat(arr)
        })
        this.setState({
            nowStep: index,
            checkGoods: checkGoods
        })
        this.props.addGoods({goodsSku: goodsSku})
    }
    // 选中商品
    chooseGoods = (goods) => {
        let {goodsSku, nowStep, activityType} = this.state
        goods.hasJoinSku = true
        goods.skuInfoVos.forEach(item => {
            item.flag = true
            item.aliasFlag = true
            item.isJoinFlag = true
            item.activityPrice = null
            activityType === 'FULL_GIFT' && (item.activityPrice = 0)
        })
        if (this.getChoosed(goods.goodsId) && this.getChoosed(goods.goodsId) !== goodsSku[nowStep][0]) return
        let findIndex = goodsSku[nowStep][1].findIndex(item => item.goodsId === goods.goodsId)
        if (findIndex > -1) {
            goodsSku[nowStep][1].splice(findIndex, 1)
        } else {
            goodsSku[nowStep][1].push({...goods, activityPrice: null, Promotions: goodsSku[nowStep][0]})
        }
        let checkGoods = []
        goodsSku.forEach(item => {
            let arr = item[1].map(item2 => item[0] + '-' + item2.goodsId)
            if (arr.length > 0) checkGoods = checkGoods.concat(arr)
        })
        this.setState({
            goodsSku,
            checkGoods: checkGoods
        })
        console.log(goodsSku, 'goodsSkugoodsSkugoodsSku');
        this.props.addGoods({goodsSku: goodsSku})
    }
    goodsSubmit = () => {
        this.setState({
            nowStep: -1
        })
    }

    pageChange(e) {

        this.setState({pageNo: e}, () => {
            this.getData()
        })

    }

    getChoosed(id) {
        let {goodsSku, checkGoods} = this.state
        let flag = checkGoods.filter(item => item.split('-')[1] === id)
        if (flag.length > 0) return flag[0].split('-')[0]
    }

    // 在拖动结束时
    onDragEnd = (result) => {
        const {goodsSku} = this.state
        const sourceIndex = result.source.index; //原位置索引
        this.setState({
            capture: false
        })
        if (!result.destination) return
        const destinationIndex = result.destination.index;//拖拽后得位置索引
        if (sourceIndex === destinationIndex) return
        let key = result.draggableId.split('_')[1]
        const [draggedItem] = goodsSku.splice(sourceIndex, 1)
        goodsSku.splice(destinationIndex, 0, draggedItem);
        this.setState({
            goodsSku: goodsSku,
        });
    }
    // 在捕获之前
    onBeforeCapture = (result) => {
        this.setState({
            capture: true
        })
    };
    // 在拖动开始之前
    onBeforeDragStart = (result) => {
        // console.log(result, '在拖动开始之前');
    };
    // 在拖动开始时
    onDragStart = (result) => {
        // console.log(result, '在拖动开始时');
    };
    // 在拖动变化时
    onDragUpdate = (result) => {
        // console.log(result, '在拖动变化时');
    };

    onMouseEnter() {
        this.setState({
            isDragDisabled: true
        })
    }

    render() {
        let {
            goodsList,
            columns,
            num,
            isDragDisabled,
            modalTitle,
            activityType,
            capture,
            isModalVisible,
            goodsSku,
            checkGoods,
            nowStep,
            nowPromotions,
            pageNo,
            pageSize,
            totalCount
        } = this.state
        const {mode} = this.props
        return (
            <DragDropContext onDragEnd={this.onDragEnd}
                             onBeforeCapture={this.onBeforeCapture}
                             onBeforeDragStart={this.onBeforeDragStart}
                             onDragStart={this.onDragStart}
                             onDragUpdate={this.onDragUpdate}
            >
                <div className="PromotionsBox">
                    {
                        /* 专区 */
                        nowStep === -1 ? <div className="Promotions">
                            <TheButton type="default" size="middle" className="PromotionsAdd"
                                       onClick={this.addPromotions}>
                                添加活动专区
                            </TheButton>
                            <Droppable droppableId="mymodal">
                                {(provided) => (
                                    <ul className="PromotionsList" ref={provided.innerRef}
                                        {...provided.droppableProps}>
                                        {
                                            goodsSku.map((item, index) => {
                                                return (
                                                    <Draggable isDragDisabled={isDragDisabled}
                                                               draggableId={'DraggableId_' + item[0]} index={index}
                                                               key={item[0] + 'Draggable_Key'}>
                                                        {(provided) => (
                                                            <li key={'Promotions-' + item[0]} ref={provided.innerRef}
                                                                {...provided.draggableProps}
                                                                {...provided.dragHandleProps}>
                                                                <div style={{paddingBottom: 20}}
                                                                     onMouseEnter={() => this.onMouseEnter}>
                                                                    <h2 onClick={() => this.editPromotions(item[0], item[1])}>{item[0]} </h2>
                                                                    <TheButton type="default" size="middle"
                                                                               className="goodsAdd"
                                                                               onClick={() => this.addGoods(item[0], item[1], index)}>
                                                                        添加商品
                                                                    </TheButton>
                                                                    <Popconfirm title="是否确认移除？" okText="是"
                                                                                cancelText="否"
                                                                                onConfirm={() => this.delPromotions(item[0], index)}>
                                                                        <TheButton type="default" size="middle"
                                                                                   className="goodsAdd">
                                                                            移除专区
                                                                        </TheButton>
                                                                    </Popconfirm>

                                                                    {
                                                                        activityType === 'FULL_GIFT' && <div style={{
                                                                            display: 'inline-block',
                                                                            position: 'relative'
                                                                        }}>
                                                                            &nbsp;&nbsp;&nbsp;&nbsp;满
                                                                            <InputNumber
                                                                                style={{width: 120, margin: '0 5px'}}
                                                                                max={100000000000}
                                                                                min={0}
                                                                                precision={2}
                                                                                defaultValue={item[2]}
                                                                                onChange={(val) => this.thresholdPriceChange(val, index)}/>元
                                                                            {
                                                                                !item[3] && <div style={{
                                                                                    color: 'red',
                                                                                    fontSize: 12,
                                                                                    transform: "scale(1)",
                                                                                    position: 'absolute',
                                                                                    left: 35,
                                                                                    bottom: -20
                                                                                }}>请填写金额</div>
                                                                            }
                                                                        </div>
                                                                    }

                                                                    <TheButton type="link" size="middle"
                                                                               className="goodsAdd">
                                                                        <a href="https://hqmimage.oss-cn-beijing.aliyuncs.com/%E6%B4%BB%E5%8A%A8%E5%95%86%E5%93%81%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF%28%E5%B8%A6%E4%BB%B7%E6%A0%BC%29.xlsx"
                                                                           download={'商品导入模板'}>下载商品导入模板</a>
                                                                    </TheButton>
                                                                    <TheButton type="default" size="middle"
                                                                               className="goodsImport">
                                                                        <input type="file" className="importBtn"
                                                                               onChange={(e) => this.importGoods(e, index)}/>
                                                                        批量导入商品
                                                                    </TheButton>
                                                                    {
                                                                        this.props.checkIng && item[1].length === 0 &&
                                                                        <div style={{
                                                                            color: 'red',
                                                                            fontSize: 12,
                                                                            transform: "scale(1)"
                                                                        }}>请选择活动商品</div>
                                                                    }
                                                                </div>
                                                                {
                                                                    item[1].length > 0 ?
                                                                        <table
                                                                            className={`table ${capture ? 'put-away' : 'expand'}`}
                                                                            border={1}>
                                                                            <thead className="thead">
                                                                            <tr>
                                                                                {columns.map((th, th_index) => {
                                                                                    return <th
                                                                                        key={new Date() + "th" + th_index}
                                                                                        className="td">{th.title}</th>
                                                                                })}
                                                                            </tr>
                                                                            </thead>
                                                                            <tbody className="tbody">
                                                                            {
                                                                                item[1].map((data, data_index) => {
                                                                                    return data.skuInfoVos.map((sku, tr_index) => {
                                                                                        return tr_index === 0 ?
                                                                                            <tr className={["tr", !data.hasJoinSku ? 'joinLen0' : ''].join(' ')}
                                                                                                key={new Date() + tr_index}
                                                                                                style={{background: mode === 'edit' && data.missGoods ? 'rgba(230, 162, 60,.5)' : ''}}>
                                                                                                <td className="td"
                                                                                                    rowSpan={data.skuInfoVos.length}>{data.goodsName}</td>
                                                                                                <td className="td"
                                                                                                    rowSpan={data.skuInfoVos.length}>{data.goodsId}</td>

                                                                                                <td className="td"
                                                                                                    style={{background: mode === 'edit' && (sku.missSku || data.missGoods) ? 'rgba(230, 162, 60,.5)' : ''}}>{sku.skuAttributes[tr_index].goodsKeyName + ':' + sku.skuAttributes[tr_index].goodsValue}</td>
                                                                                                {
                                                                                                    activityType === 'FULL_GIFT' &&
                                                                                                    <td className="td"
                                                                                                        style={{background: mode === 'edit' && (sku.missSku || data.missGoods) ? 'rgba(230, 162, 60,.5)' : ''}}>
                                                                                                        <Input
                                                                                                            defaultValue={sku.aliasName}
                                                                                                            onChange={(val) => this.aliasChange(val, sku)}/>
                                                                                                        {
                                                                                                            !sku.aliasFlag &&
                                                                                                            <span
                                                                                                                style={{
                                                                                                                    color: 'red',
                                                                                                                    fontSize: 12,
                                                                                                                    transform: "scale(.5)"
                                                                                                                }}>请填写商品别名</span>
                                                                                                        }
                                                                                                    </td>
                                                                                                }
                                                                                                <td className="td"
                                                                                                    style={{background: mode === 'edit' && (sku.missSku || data.missGoods) ? 'rgba(230, 162, 60,.5)' : ''}}>{data.storeName}</td>
                                                                                                <td className="td"
                                                                                                    style={{background: mode === 'edit' && (sku.missSku || data.missGoods) ? 'rgba(230, 162, 60,.5)' : ''}}>{(sku.skuOriginalPrice / 100).toFixed(2)}</td>
                                                                                                <td className="td"
                                                                                                    style={{background: mode === 'edit' && (sku.missSku || data.missGoods) ? 'rgba(230, 162, 60,.5)' : ''}}>{(sku.skuCurrentPrice / 100).toFixed(2)}</td>

                                                                                                <td className="td"
                                                                                                    style={{background: mode === 'edit' && (sku.missSku || data.missGoods) ? 'rgba(230, 162, 60,.5)' : ''}}>
                                                                                                    {activityType !== 'FULL_GIFT' ?
                                                                                                        <InputNumber
                                                                                                            disabled={(mode === 'edit' && (sku.missSku || data.missGoods)) || activityType === 'FULL_GIFT'}
                                                                                                            style={{outline: !sku.flag ? '1px solid red' : ''}}
                                                                                                            max={100000000000}
                                                                                                            min={0}
                                                                                                            key={sku.goodsSkuId}
                                                                                                            step={0.01}
                                                                                                            precision={2}
                                                                                                            defaultValue={sku.activityPrice}
                                                                                                            onChange={(val) => this.acPriceChange(val, sku)}/>
                                                                                                        : <div
                                                                                                            style={{width: 120}}>{sku.activityPrice}</div>}
                                                                                                    {

                                                                                                        !sku.flag &&
                                                                                                        <span style={{
                                                                                                            color: 'red',
                                                                                                            fontSize: 12,
                                                                                                            transform: "scale(.5)"
                                                                                                        }}>请填写活动价格</span>
                                                                                                    }
                                                                                                </td>
                                                                                                {/*<td className="td"*/}
                                                                                                {/*    style={{background: mode === 'edit' && (sku.missSku || data.missGoods) ? 'rgba(230, 162, 60,.5)' : ''}}>*/}
                                                                                                {/*    <Switch*/}
                                                                                                {/*        defaultChecked={sku.isJoinFlag}*/}
                                                                                                {/*        checkedChildren="是"*/}
                                                                                                {/*        unCheckedChildren="否"*/}
                                                                                                {/*        onChange={(val) => this.isJoinChange(val, sku)}/>*/}
                                                                                                {/*</td>*/}
                                                                                                <td className={`td ${!data.hasJoinSku ? "joinSkuEmpty" : ""}`}
                                                                                                    style={{background: '#fff'}}
                                                                                                    rowSpan={data.skuInfoVos.length}>
                                                                                                    <Popconfirm
                                                                                                        title="是否确认移除？"
                                                                                                        okText="是"
                                                                                                        cancelText="否"
                                                                                                        onConfirm={() => this.delGoods(data, data_index)}>
                                                                                                        <TheButton
                                                                                                            style={{color: '#ff4d4f'}}>删除</TheButton>
                                                                                                    </Popconfirm>
                                                                                                    <Popconfirm
                                                                                                        title="是否确认置顶？"
                                                                                                        okText="是"
                                                                                                        cancelText="否"
                                                                                                        onConfirm={() => this.stick(data, data_index)}>
                                                                                                        <TheButton>置顶</TheButton>
                                                                                                    </Popconfirm>
                                                                                                </td>
                                                                                            </tr>
                                                                                            :
                                                                                            <tr className={["tr", !data.hasJoinSku ? 'joinLen0' : ''].join(' ')}
                                                                                                key={new Date() + tr_index}>
                                                                                                <td className="td"
                                                                                                    style={{background: mode === 'edit' && (sku.missSku || data.missGoods) ? 'rgba(230, 162, 60,.5)' : ''}}>{sku.skuAttributes.map(attr => {
                                                                                                    return attr.goodsKeyName + ':' + attr.goodsValue
                                                                                                }).join(';')}</td>
                                                                                                {
                                                                                                    activityType === 'FULL_GIFT' &&
                                                                                                    <td className="td"
                                                                                                        style={{background: mode === 'edit' && (sku.missSku || data.missGoods) ? 'rgba(230, 162, 60,.5)' : ''}}>
                                                                                                        <Input
                                                                                                            defaultValue={sku.aliasName}
                                                                                                            onChange={(val) => this.aliasChange(val, sku)}/>
                                                                                                        {
                                                                                                            !sku.aliasFlag &&
                                                                                                            <span
                                                                                                                style={{
                                                                                                                    color: 'red',
                                                                                                                    fontSize: 12,
                                                                                                                    transform: "scale(.5)"
                                                                                                                }}>请填写商品别名</span>
                                                                                                        }
                                                                                                    </td>
                                                                                                }
                                                                                                <td className="td"
                                                                                                    style={{background: mode === 'edit' && (sku.missSku || data.missGoods) ? 'rgba(230, 162, 60,.5)' : ''}}>{data.storeName}</td>

                                                                                                <td className="td"
                                                                                                    style={{background: mode === 'edit' && (sku.missSku || data.missGoods) ? 'rgba(230, 162, 60,.5)' : ''}}>{(sku.skuOriginalPrice / 100).toFixed(2)}</td>
                                                                                                <td className="td"
                                                                                                    style={{background: mode === 'edit' && (sku.missSku || data.missGoods) ? 'rgba(230, 162, 60,.5)' : ''}}>{(sku.skuCurrentPrice / 100).toFixed(2)}</td>

                                                                                                <td className="td"
                                                                                                    style={{background: mode === 'edit' && (sku.missSku || data.missGoods) ? 'rgba(230, 162, 60,.5)' : ''}}>
                                                                                                    {activityType !== 'FULL_GIFT' ?
                                                                                                        <InputNumber
                                                                                                            disabled={(mode === 'edit' && (sku.missSku || data.missGoods)) || activityType === 'FULL_GIFT'}
                                                                                                            style={{outline: !sku.flag ? '1px solid red' : ''}}
                                                                                                            max={100000000000}
                                                                                                            min={0}
                                                                                                            key={sku.goodsSkuId}
                                                                                                            step={0.01}
                                                                                                            precision={2}
                                                                                                            defaultValue={sku.activityPrice}
                                                                                                            onChange={(val) => this.acPriceChange(val, sku)}/>
                                                                                                        : <div
                                                                                                            style={{width: 120}}>{sku.activityPrice}</div>}
                                                                                                    {
                                                                                                        !sku.flag &&
                                                                                                        <span style={{
                                                                                                            color: 'red',
                                                                                                            fontSize: 12,
                                                                                                            transform: "scale(.5)"
                                                                                                        }}>请填写活动价格</span>
                                                                                                    }
                                                                                                </td>
                                                                                                {/*<td className="td"*/}
                                                                                                {/*    style={{background: mode === 'edit' && (sku.missSku || data.missGoods) ? 'rgba(230, 162, 60,.5)' : ''}}>*/}
                                                                                                {/*    <Switch*/}
                                                                                                {/*        defaultChecked={sku.isJoinFlag}*/}
                                                                                                {/*        checkedChildren="是"*/}
                                                                                                {/*        unCheckedChildren="否"*/}
                                                                                                {/*        onChange={(val) => this.isJoinChange(val, sku)}/>*/}
                                                                                                {/*</td>*/}
                                                                                            </tr>
                                                                                    })
                                                                                })
                                                                            }
                                                                            </tbody>
                                                                        </table> : null
                                                                }
                                                            </li>
                                                        )}
                                                    </Draggable>

                                                )
                                            })
                                        }
                                        {provided.placeholder}
                                    </ul>
                                )}


                            </Droppable>

                        </div> : null
                    }
                    {
                        /* 商品列表 */
                        nowStep > -1 ? <div className="goodsList">
                            <div className="title">{goodsSku && goodsSku.length > 0 && goodsSku[nowStep][0]}</div>
                            <Input className="goodsSearch" onPressEnter={this.onSearch.bind(this)}
                                   prefix={<SearchOutlined className="site-form-item-icon"/>} placeholder='搜索商品'/>
                            {
                                goodsList.length > 0 ? <ul className="list" id="goodsList">
                                    {
                                        goodsList.map(goods => {
                                            return (
                                                <li key={goods.goodsId} data-txt={this.getChoosed(goods.goodsId)}
                                                    className={this.getChoosed(goods.goodsId) ? 'checked' : null}
                                                    onClick={() => this.chooseGoods(goods)}>
                                                    <img src={goods.goodsShowImages.split(',')[0]} alt=""/>
                                                    <p><strong>{goods.storeName}</strong></p>
                                                    <p>{goods.goodsName}</p>
                                                    <p className="price">￥ {Number(goods.currentPrice / 100).toFixed(2)}</p>
                                                </li>
                                            )
                                        })
                                    }


                                </ul> : null
                            }

                            <Pagination size="small" current={pageNo} total={totalCount} showSizeChanger={false}
                                        onChange={this.pageChange.bind(this)}/>
                            <TheButton type="default" size="middle" className="goodsAdd" style={{'marginTop': 20}}
                                       onClick={this.goodsSubmit}>
                                确定
                            </TheButton>
                        </div> : null

                    }

                    <Modal title={modalTitle} visible={isModalVisible} onOk={this.handleOk}
                           onCancel={this.handleCancel}>
                        <Form
                            ref={this.formRef}
                            initialValues={{
                                num: num
                            }}
                        >
                            <Form.Item
                                name="num"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入专区名称!',
                                    },
                                ]}
                            >
                                <Input
                                    style={{width: '100%'}}
                                />
                            </Form.Item>
                        </Form>

                    </Modal>
                </div>
            </DragDropContext>

        )
    }
}

Goods.propTypes = {
    goodsSku: PropTypes.array,
}
Goods.defaultProps = {
    goodsSku: [],

}
export default Goods
